<style>
  .river-policy-page{

  }
  .river-policy-page .input-group-addon{
    border: none;
  }
  .river-policy-page .btn-add-new{
    width: 150px;
    text-align: center;
    height: 35px;
    line-height: 35px;
    background: #4fb1ec;
    color: #fff;
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 15px;
  }
</style>
<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak comment-style river-policy-page" v-cloak>
    <div class="ibox float-e-margins">
    <div class="ibox-content">
        <form id="info_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8" @submit.prevent="page(1)">
            <div class="form-group" style="margin-right:30px;">
                <label class="font-noraml">创建时间</label>
                <div class="input-daterange input-group">
                    <input class="form-control" autocomplete="off" type="text" placeholder="点击输入起始时间"  name="dateBegin" />
                    <span class="input-group-addon">到</span>
                    <input class="form-control" autocomplete="off" type="text" placeholder="点击输入截止时间" name="dateEnd" />
                </div>
            </div>
            <div class="form-group">
                <label class="font-noraml">关键字</label>
                <input type="text" name="keyword" placeholder="请输入关键词" class="form-control">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-sm btn-primary btn-search">搜索</button>
                <button type="reset" class="btn btn-sm btn-dafault btn-reset">重置</button>
            </div>
        </form>
        <a href="javascript:;" @click="edit('a',{id:0});" v-if='staff.hasPermission("riverPolicy:add")' class="btn-add-new"> + 文件上传</a>
        <div class="table-responsive table-scrollable table-box">
            <table class="table table-bordered table-striped  ">
                <thead>
                    <tr>
                        <th>文件名称</th>
                        <th>上传时间</th>
                        <th>文件类型</th>
                        <th>所在河道</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-if="result.data.data && result.data.data.length>0" v-for="(item, index) in result.data.data">
                        <td>{{item.name}}</td>
                        <td>{{item.dateCreated | date('yyyy-MM-dd HH:mm:ss')}}</td>
                        <td>
                            <span v-if="item.type==1">整治方案</span>
                            <span v-if="item.type==2">应急预案</span>
                        </td>
                        <td>{{item.riverName}}</td>
                        <td>
                            <!--
                                                  <a href="javascript:;" v-show='staff.hasPermission("riverPolicy:info")'  @click="info('i',item)" rel="nofollow" class="label label-info" ><i class="fa fa-bookmark"></i> 详情</a>
                                                  -->
                            <a :href="item.path" target="_blank" class="label label-info icon-item4"></a>
                            <a href="javascript:;" v-show='staff.hasPermission("riverPolicy:edit")' @click="edit('e',item)" class="label label-success icon-item6"></a>
                            <a href="javascript:;" v-show='staff.hasPermission("riverPolicy:del")' @click="del(item)" rel="nofollow" class="label label-danger icon-item3"></a>
                        </td>
                    </tr>
                    <tr v-if="result.data.data==null || result.data.data.length==0">
                        <td colspan="5">
                            <div class="alert"><strong>{{ result | message }}</strong></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="b_page" v-html="tagPages"></div>
        </div>
    </div>
</div>

</div>

</template>
<script type="text/javascript">
    import '@/assets/css/style.css'

    import $ from '@/assets/js/jquery-vendor.js'
    import 'jquery.cookie'
    import axios from 'axios'
    import '@/assets/js/datepicker-vendor.js'
    import {$storage, axiosContentType, site} from '@/assets/js/boss'
    import '@/assets/js/pageTag'

   export default {
       data() {
         return {
           result: {data: {pageIndex: 1, data: []}},
           tagPages: ''
         }
       },
       mounted() {
         let that = window.$vueApp = this;
         document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
         this.staff.init(function () {
           that.page(1);
         });
         $('.input-daterange').datepicker({
           language: 'zh-CN',
           format: 'yyyy-mm-dd',
           keyboardNavigation: !1,
           forceParse: !1,
           autoclose: !0
         });
       },
       watch: {
           // result: function (val) {
           //   this.$nextTick(function () { console.info('变量result渲染完成'); }
           // }
       },
       methods: {
           page(pageIndex) {
               let that = this;
               if (!pageIndex) pageIndex = 1;
               axios.post(site.riverPolicy.page + pageIndex
                   , $('#info_search_form').serialize()
                   , axiosContentType.xWwwFormUrlencoded
               ).then(function (response) {
                 const result = response.data;
                 if (result.code === 0) {
                   that.result = result;
                   that.tagPages = that.tag.page(result.data);
                 } else {
                   alert(result.message);
                 }
               });
           },
           info(title, item) {
               $storage.setItem(site.riverPolicy.info, item.id);
               this.lbox.openMyBoxLayer(title, site.riverPolicy.view + '/info');
           },
           edit(title, item) {
               $storage.setItem(site.longRiverLog.info, item.id);
               this.lbox.openMyBoxLayer(title, site.longRiverLog.view + '/edit');
           },
           del(item) {
               let that = this;
               if (confirm('确认删除吗?')) {
                   axios.post(site.riverPolicy.del + item.id, {}).then(function (response) {
                       const result = response.data;
                       if (result.code === 0) {
                           that.page(that.result.data.pageIndex);
                           alert('删除成功');
                       } else {
                           alert(result.message);
                       }
                   });
               }
           }
       }
    }
</script>
